<template>
  <a-layout>
    <a-layout-header id="header">
      <div id="head-left">
        <router-link to="/" style="display: flex; justify-content: center; align-items: center">
          <HomeFilled :style="{ fontSize: '26px' }" id="home-icon" />
        </router-link>
        <div id="head-text">基地详细信息</div>
      </div>
      <LogoutOutlined :style="{ fontSize: '22px', PointerEvent: 'none' }" id="logout-icon" @click="logout" />
    </a-layout-header>
    <a-layout-content style="margin: 20px 16px">
      <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <a-form :model="formState" name="horizontal_login" layout="vertical" autocomplete="off" id="main-form">
          <div id="form-one">
            <a-form-item style="text-align: start" label="搜索培训地点（中文）" name="check">
              <a-input v-model:value="formState.check">
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="基地代码" name="baseCode" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseCode" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="其他管理员联系方式" name="adminContact">
              <a-input v-model:value="formState.adminContact" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="区域-中文" name="areaCNS" :rules="[{ required: true }]">
              <a-input v-model:value="formState.areaCNS" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="区域-英文" name="areaEN" :rules="[{ required: true }]">
              <a-input v-model:value="formState.areaEN" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="区域-中文繁体" name="areaCNC" :rules="[{ required: true }]">
              <a-input v-model:value="formState.areaCNC" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训地点-中文" name="trainingLocationCNS">
              <a-input v-model:value="formState.trainingLocationCNS" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训地点-英文" name="trainingLocationEN" :rules="[{ required: true }]">
              <a-input v-model:value="formState.trainingLocationEN" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训地点-中文繁体" name="trainingLocationCNC" :rules="[{ required: true }]">
              <a-input v-model:value="formState.trainingLocationCNC" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="创建时间" name="createTime" :rules="[{ required: true }]">
              <a-input v-model:value="formState.createTime" type="date" readonly>
                <template #prefix>
                  <FieldTimeOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="更新时间" name="updateTime" :rules="[{ required: true }]">
              <a-input v-model:value="formState.updateTime" type="date" readonly>
                <template #prefix>
                  <FieldTimeOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
          </div>
          <div id="form-two">
            <a-form-item style="text-align: start" name="baseCNCD">
              <div id="submit-container">
                <button id="save-button2" @click="onCheck()" style="margin-top: 30px">
                  <CheckOutlined />
                  搜索
                </button>
              </div>
            </a-form-item>

            <a-form-item label="基地管理员" name="baseAdmin" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseAdmin" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="基地管理员邮箱" name="baseAdminEmail" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseAdminEmail" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训基地-中文" name="baseCNS" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseCNS" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训基地-英文" name="baseEN" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseEN" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="培训基地-中文繁体" name="baseCNC" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseCNC" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="基地描述-中文" name="baseCNSD" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseCNSD" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="基地描述-英文" name="baseEND" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseEND" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="基地描述-中文繁体" name="baseCNCD" :rules="[{ required: true }]">
              <a-input v-model:value="formState.baseCNCD" readonly>
                <template #prefix>
                  <TagsOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="创建人" name="creater" :rules="[{ required: true }]">
              <a-input v-model:value="formState.creater" readonly>
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="更新人" name="updater" :rules="[{ required: true }]">
              <a-input v-model:value="formState.updater" readonly>
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center"> Front Third Group ©2023 </a-layout-footer>
  </a-layout>
</template>

<style>
#main-form {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#form-one {
  flex: 1;
}

#form-two {
  flex: 1;
}

#header {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: 0px;
  align-items: center;
  justify-content: center;
}

#head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 3;
}

#home-icon {
  margin-left: 20px;
  margin-right: 20px;
  flex: 1;
}

#head-text {
  font-size: 18px;
  flex: 6;
}

#logout-icon {
  flex: 8;
  display: flex;
  justify-content: end;
  padding-right: 30px;
}
</style>

<script setup>
import { TagsOutlined, FieldTimeOutlined, UserOutlined, HomeFilled, LogoutOutlined } from '@ant-design/icons-vue'
import apiFunction from '../api/api.js'
import { getCurrentInstance, ref } from 'vue'
const logout = apiFunction.logout
const { proxy } = getCurrentInstance()

// 基地详细信息，我们之后通过 axios 获取数据进行填充
const formState = ref({
  baseCode: 'baseCode from backend', //基地代码no
  adminContact: 'adminContact from backend', //其他基地管理员联系方式-del
  areaCNS: 'areaCNS from backend', //区域中文-area
  areaEN: 'areaEN from backende', //区域英语-areaEnUs
  areaCNC: 'areaCNC from backend', //区域中文繁体-areaZhTw
  trainingLocationCNS: 'trainingLocationCNS from backend', //培训地点中文-address
  trainingLocationEN: 'trainingLocationEN from backend', //培训地点英语-addressEnUs
  trainingLocationCNC: 'trainingLocationCNC from backend', //培训地点中文繁体-addressZhTw
  createTime: '2018-07-22', //创建时间-createTime
  updateTime: '2018-07-22', //更新时间-updateTime
  baseAdmin: 'baseAdmin from backEnd', //基地管理员-personId
  baseAdminEmail: 'baseAdminEmail form backEnd', //基地管理员邮箱
  baseCNS: 'baseCNS from backend', //培训基地中文-trainingBase
  baseEN: 'baseEN from backend', //培训基地英语-trainingBaseEnUs
  baseCNC: 'baseCNC from backend', //培训基地中文繁体-trainingBaseZhTw
  baseCNSD: 'baseCNSD from backend', //基地描述中文-describe
  baseEND: 'baseEND from backend', //基地描述英语-describeEnUs
  baseCNCD: 'baseCNCD from backend', //基地描述中文繁体-describeZhTw
  creater: 'creater from backend', //创建人-creator
  updater: 'updater from backend' //更新人-updator
})
// import { reactive } from 'vue';
// const formData = reactive({
//     check: '',
// });
//const data=ref('')
const onCheck = async () => {
  if (!formState.value.check) {
    alert('请输入搜索培训地点（中文）')
    return
  }
  const loading = proxy.$loading()
  const url = `https://localhost:44305/api/Base/GetBaseInfo?trainingBase=${formState.value.check}`
  try {
    const response = await fetch(url) // 发起 GET 请求
    loading.close()
    if (response.ok) {
      const data = await response.json() // 解析响应数据
      if (!data || data.length == 0) {
        alert('请求不到数据！')
        return
      }
      const firstData = data[0]
      if (firstData.status != 'Success') {
        alert(firstData.msg)
        return
      }

      const baseInfo = firstData.baseInfo
      formState.value = {
        baseCode: baseInfo.no, //基地代码no
        adminContact: baseInfo.del, //其他基地管理员联系方式-del
        areaCNS: baseInfo.area, //区域中文-area
        areaEN: baseInfo.areaEnUs, //区域英语-areaEnUs
        areaCNC: baseInfo.areaZhTw, //区域中文繁体-areaZhTw
        trainingLocationCNS: baseInfo.address, //培训地点中文-address
        trainingLocationEN: baseInfo.addressEnUs, //培训地点英语-addressEnUs
        trainingLocationCNC: baseInfo.addressZhTw, //培训地点中文繁体-addressZhTw
        createTime: baseInfo.createTime, //创建时间-createTime
        updateTime: baseInfo.updateTime, //更新时间-updateTime
        baseAdmin: baseInfo.personId, //基地管理员-personId
        baseAdminEmail: '', //基地管理员邮箱
        baseCNS: baseInfo.trainingBase, //培训基地中文-trainingBase
        baseEN: baseInfo.trainingBaseEnUs, //培训基地英语-trainingBaseEnUs
        baseCNC: baseInfo.trainingBaseZhTw, //培训基地中文繁体-trainingBaseZhTw
        baseCNSD: baseInfo.describe, //基地描述中文-describe
        baseEND: baseInfo.describeEnUs, //基地描述英语-describeEnUs
        baseCNCD: baseInfo.describeZhTw, //基地描述中文繁体-describeZhTw
        creater: baseInfo.creator, //创建人-creator
        updater: baseInfo.updator //更新人-updator
      }
    } else {
      console.error('请求失败:', response.status)
    }
  } catch (error) {
    console.error(error)
    loading.close()
  }
}
</script>
